<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* div{
      width: 100px;
      height: 100px;
      background-color: red;
    } */
    /* em是相对单位，它相对于父级的大小而改变自己的倍数。1em就是父级的一倍(就是不变)，2em就是父级的两倍
       rem相对单位，它相对的是根元素(html)而改变自己的倍数，1rem就是根元素的一倍(就是不变),2rem就是根元素的两倍
    */
    .p1{
      font-size: 2em;
    }
    .p1 span{
      font-size: 2em;
    }
    .p2{
      font-size: 2rem;
    }
    .p2 span{
      font-size: 2rem;
    }
    h1{
      width: 50%;
      height: 100px;
      background-color: aqua;
    }
    /* 百分比单位是相对父级大小的
       电脑端不要轻易给高度写百分比单位
    */
    h1 div{
      width: 50%;
      height: 50%;
      background-color: red;
    }
  </style>
</head>

<body>
  <div></div>
  <p class="p1">一个中国字
    <span>p1span</span>
  </p>
  <p class="p2">一个中国字
    <span>p2span</span>
  </p>
  <h1><div></div></h1>
</body>
</html>